$(function () {
    //导航条的显示/隐藏
    $(window).scroll(function () {
        //获取垂直滚动了多少距离
        let scrollY = $(document).scrollTop();
        //console.log(scrollY);
        //如果滚动条距离大于200px，导航条显示
        if (scrollY > 100) {
            $('#nav').slideDown(600)
        } else {
            $('#nav').slideUp(600)
        }
    })
    //点击切换白天黑夜
    $('.nav-center-rightFour .nav-center-sun').click(function () {
        $('.nav-center-rightFour .nav-center-sun').toggleClass('icon-yueliang')
    })
});
// ['fangyi', 'kangyi', 'beiyao', 'jiuyi'].forEach(key => {
//     $('.' + key).click(function () {
//         allHide()
//         document.querySelector('.main-template').style.display = 'block'
//     })
// });

// 下面是搜索的内容 分界线
$('.header-center-input-search').click(function () {
    let searchText = document.querySelector('.header-center-input-form').value
    if (!searchText.length) return render(newsData, 0)
    var data = newsData.filter(item => item.title.includes(searchText))
    // debugger
    var searchStr = ''
    var i = 0
    var arr = []
    data.forEach(function (item) {
        searchStr += `
<div class="main-template " attr-data="${i}" style="display: block">
<div class="main-title">
    <div class="main-title-word">
        <div class="title-name">
            <span>${item.title}</span>
        </div>
        <div class="title-from">
            <span>${item.where}</span>
        </div>
    </div>
    <div class="main-title-img">
        <img
            style="width: 200px; height: 87px;object-fit: cover;"
            src="${requestUrl + item.cover_img}">
    </div>
</div>
</div>
`
        i++
        arr.push(item)
    })

    document.querySelector('#main-content').innerHTML = searchStr
    document.querySelectorAll('.main-template').forEach(a => {
        a.addEventListener('click', function (e) {
            var index = this.getAttribute('attr-data')
            var data = arr[index]
            document.querySelector('.biaoti').innerHTML = data.title
            document.querySelector('.laiyuan').innerHTML = data.where
            document.querySelector('.fabushijian').innerHTML = data.pub_date
            document.querySelector('.fenlei').innerHTML = data.cate_name
            document.querySelector('.zhuangtai').innerHTML = data.state
            document.querySelector('.zhengwen').innerHTML = data.content
            document.querySelector('.tupian').src = requestUrl + data.cover_img
            document.querySelector('.mask').style.display = 'block'
        })
    })

    // 上面是搜索的内容 分界线
})
$('.shishizhuizongBtn').click(function () {
    render(newsData, 0)
    // allHide()
    // $('.shishizhuizong').show()
})
$('.fangyi').click(function () {
    render(newsData, 1)
    // allHide()
    // singleShow(1)
})
$('.kangyi').click(function () {
    render(newsData, 2)
    // allHide()
    // singleShow(2)
})
$('.beiyao').click(function () {
    render(newsData, 3)
    // allHide()
    // singleShow(3)
})
$('.jiuyi').click(function () {
    render(newsData, 4)
    // allHide()
    // singleShow(4)
})

function singleShow (index) {
    allHide()
    document.querySelectorAll('.a_' + index).forEach(function (el) {
        el.style.display = 'block'
    })
}

function allHide () {
    document.querySelectorAll('.main-template').forEach(function (el) {
        el.style.display = 'none'
    })
    document.querySelector('.shishizhuizong').style.display = 'none'
}

document.querySelector('.caca').addEventListener('click', function () {
    document.querySelector('.mask').style.display = 'none'
})

var requestUrl = 'http://localhost:3007'

var newsData = []

$.ajax({
    url: requestUrl + '/my/article/list',
    type: 'POST',
    success: function (res) {
        newsData = res.data
        render(newsData, 0)
        console.log('请求成功: ', res)

    },
    error: function (err) {
        console.log('请求失败: ', err)
    }
})

var str = ''

function render (data, showId) {
    i = 0
    arr = []
    var imgShow = showId === 0 ? 'block' : 'none'
    str = `
        <div class="shishizhuizong" style="display: ${imgShow}">
            <img src="./images/zhuizong1.png" style="width: 600px" alt="">
            <img src="./images/zhuizong2.png" style="width: 600px" alt="">
        </div>
    `
    insertContent(getData(data, 1), 1, showId)
    insertContent(getData(data, 2), 2, showId)
    insertContent(getData(data, 3), 3, showId)
    insertContent(getData(data, 4), 4, showId)
    document.querySelector('#main-content').innerHTML = str
    document.querySelectorAll('.main-template').forEach(a => {
        a.addEventListener('click', function (e) {
            var index = this.getAttribute('attr-data')
            var data = arr[index]
            document.querySelector('.biaoti').innerHTML = data.title
            document.querySelector('.laiyuan').innerHTML = data.where
            document.querySelector('.fabushijian').innerHTML = data.pub_date
            document.querySelector('.fenlei').innerHTML = data.cate_name
            document.querySelector('.zhuangtai').innerHTML = data.state
            document.querySelector('.zhengwen').innerHTML = data.content
            document.querySelector('.tupian').src = requestUrl + data.cover_img
            document.querySelector('.mask').style.display = 'block'
        })
    })
}

var getData = function (data, id) {
    return data.filter(item => +item.cate_id === id)
}

var i = 0
var arr = []
var insertContent = function (list, id, showId) {
    var isShow = id === showId ? 'block' : 'none'
    list.forEach(function (item) {
        str += `
<div class="main-template a_${id}" attr-data="${i}" style="display: ${isShow}">
<div class="main-title">
    <div class="main-title-word">
        <div class="title-name">
            <span>${item.title}</span>
        </div>
        <div class="title-from">
            <span>${item.where}</span>
        </div>
    </div>
    <div class="main-title-img">
        <img
            style="width: 200px; height: 87px;object-fit: cover;"
            src="${requestUrl + item.cover_img}">
    </div>
</div>
</div>
`
        i++
        arr.push(item)
    })
}

